<template>
<div>
   <h2>Sub组件中的count: {{$store.state.count}}</h2>
   <h2>计算属性count: {{count}},{{message}}</h2>
   <button @click="doSub">-</button>
   <ul>
      <li v-for="item in $store.getters.ckBooks" :key="item.id">{{item.id}}-{{item.name}}</li>
   </ul>
   <h2>当前选中的书本数量： {{$store.getters.ckBooksLength}}</h2>
   <div>
      <input type="text" v-model="id" placeholder="请输入id">
      <button @click="doSearch">搜索</button>
   </div>
</div>
</template>

<script>
import { mapState } from 'vuex'
import {MT_SUB} from '../store/mutation-types.js'

export default {
   data() {
      return {
         id: ''
      }
   },
   computed: {
     /*  count(){
         return this.$store.state.count
      }, */
      ...mapState(['message','count','books']) 
   },
   methods: {
      doSub(){
        // this.$store.state.count--
        this.$store.commit(MT_SUB)
      },
      doSearch(){
         //将id的值传给getters
         this.$store.getters.searchById(this.id)
      }
   },

}
</script>

<style scoped>

</style>